<script lang="ts" setup>
import { Barbell, AlertCircle } from '@vicons/tabler'
import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
import * as monaco from 'monaco-editor'
import LexicalEditor from '@/views/LLMStudio/build/components/prompt-editor/lexical-editor.vue'

// 可拖动高度
const height = ref(250)
const isDragging = ref(false)
const startY = ref(0)
const startHeight = ref(0)
const editorInstance = ref(null)

const handleMouseDown = (e: MouseEvent) => {
  isDragging.value = true
  startY.value = e.clientY
  startHeight.value = height.value
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

const handleMouseMove = (e: MouseEvent) => {
  if (!isDragging.value) return
  const deltaY = e.clientY - startY.value
  height.value = Math.max(250, startHeight.value + deltaY)
  updateEditorLayout()
}

const handleMouseUp = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
}

const updateEditorLayout = () => {
  nextTick(() => {
    if (editorInstance.value) {
      editorInstance.value.layout()
    }
  })
}

// Monaco Editor 相关逻辑
const monacoContent = ref('')

const editorOptions = {
  theme: 'vs-light',
  language: 'customLanguage',
  lineNumbers: 'off',
  minimap: { enabled: false },
  renderLineHighlight: 'none',
  quickSuggestions: { other: false, comments: false, strings: false },
  suggestOnTriggerCharacters: false,
  wordWrap: 'on',
  fontFamily: 'iPhone',
  fontSize: 14,
  scrollBeyondLastLine: false,
  automaticLayout: true // 添加这个选项
}

const handleEditorChange = (value: string) => {
  monacoContent.value = value
}

const handleEditorDidMount = (editor) => {
  editorInstance.value = editor
}

// 自定义语言配置
onMounted(() => {
  monaco.languages.register({ id: 'customLanguage' })
  monaco.languages.setMonarchTokensProvider('customLanguage', {
    tokenizer: {
      root: [[/\{\{[^\\}]+\}\}/, 'custom-highlight']]
    }
  })
  monaco.editor.defineTheme('customTheme', {
    base: 'vs',
    inherit: true,
    rules: [{ token: 'custom-highlight', foreground: '0000FF', fontStyle: 'bold' }],
    colors: {}
  })
})

// 监听内容变化，更新编辑器主题
watch(monacoContent, () => {
  if (editorInstance.value) {
    monaco.editor.setTheme('customTheme')
  }
})

// 监听高度变化
watch(height, updateEditorLayout)
</script>

<template>
  <div
    class="w-full rounded-xl border-#787FF5 border-solid border-2px pt-10px bg-#EEF4FF relative flex flex-col"
  >
    <div class="w-full rounded-xl flex justify-between px-10px items-center mb-10px">
      <div class="flex items-center gap-5px">
        提示词 <n-icon size="15" :component="AlertCircle" color="#444CE7"></n-icon>
      </div>
      <div class="flex items-center gap-5px text-#444CE7 cursor-pointer">
        <n-icon size="15" :component="Barbell"></n-icon> 强化
      </div>
    </div>
    <n-scrollbar
      class="w-full h-full"
      :style="{
        height: `${height}px`
      }"
    >
      <LexicalEditor :height="height"></LexicalEditor>
    </n-scrollbar>
    <div class="w-full rounded-b-2xl flex justify-between items-end bg-white">
      <div
        class="flex items-center justify-center bg-gray-100 px-10px rounded-2xl mb-5px ml-5px cursor-ew-resize text-10px text-gray-400"
      >
        {{ monacoContent.length }}
      </div>
      <div
        class="flex items-center rounded-2xl mb-2px cursor-ns-resize"
        @mousedown="handleMouseDown"
      >
        <div class="w-25px h-4px bg-gray-200 rounded-full mb-5px"></div>
      </div>
      <div class="w-50px"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.monaco-editor-container {
  border-radius: 10px;
}

.cursor-ew-resize {
  cursor: ew-resize;
}

.cursor-ns-resize {
  cursor: ns-resize;
}
</style>
